<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>vue 鼠标划矩形</title>
	<link rel="stylesheet" href="./css/tg_mobile_reset.css">
	<style>

		.test {width: 320px;height: 100%;border: 2px solid salmon;position: relative; margin: 100px auto;line-height: 0;}
		#wp>div.draw{border: 2px dashed purple;position: absolute;top: 0;left: 0;}
		#wp {width: 100%;height: 100%;top: 0;}
		#wp .drawed-wp {width: 100%;height: 100%;position: absolute;border: none;top: 0;left: 0;}
		#wp .drawed-wp>.drawed {position: absolute;border: 2px solid red;}
		.del {position: absolute;height: 25px;width: 25px;line-height: 25px;border: 1px solid #ccc;font-size: 18px;text-align: center;cursor: pointer;top: 3px;right: 3px;background-color: #000;color: #fff;opacity: 0.55;}
		[v-cloak]{display: none;}
		.test img {width: 100%;height: 100%;}

		
	</style>
</head>
<body>
	<div id="app">
		<div class="test">
			<img src="./img/6.jpg" alt="">
			<div id="wp" 
			ref="hotArea"
			@mousedown="onWpDown" 
			@mousemove="onWpmove"
			@mouseup  ="onWpUp"
			>
				<div class="draw" v-if="isDrawing" :style="drawCss" v-cloak></div><!-- 绑定样式对象 -->
				<div class="drawed-wp">
					<div class="drawed" v-for="(item,index) in showList" :style="drawedCss(item)" :data-id="index" v-cloak>
						<div class="del" @click="onDelclk(index)">X</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<script src="./lib/rem.js"></script>
	<script src="./lib/vue.min.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				wpDowm:false,//鼠标点下去的时候记录鼠标移动
				startX:0,
				startY:0,
				drawMl:0,
				drawMt:0,
				drawW:0,
				drawH:0,
				isDrawing:false,//标识正在划定，显示虚线框
				hotList:[],
			},
			methods:{
				onWpDown(ev) {
					var vm = this;
					vm.startX = ev.offsetX;
					vm.startY = ev.offsetY;
					vm.wpDowm=true;//鼠标移动时开始计算距离
				},
				onWpmove(ev) {
					// console.log(ev.offsetX,ev.offsetY);
					var vm = this;
					var ofX = ev.offsetX,ofY = ev.offsetY;
					
					if(vm.wpDowm) {
						vm.drawW = Math.abs(ofX-vm.startX);
						vm.drawH = Math.abs(ofY-vm.startY);
						vm.isDrawing = true;
						vm.drawMl = ev.offsetX-vm.startX>0?vm.startX:ev.offsetX;
						vm.drawMt = ev.offsetY-vm.startY>0?vm.startY:ev.offsetY;
					}
				},
				onWpUp(ev) {
					var vm = this;
					var tmp = {};
					
					vm.startX=vm.startY=0;
					if(vm.drawW>10&&vm.drawH>10&&vm.wpDowm&&vm.isDrawing) {//一定要加上后边的两个条件验证
						tmp.l = vm.drawMl+'px';
						tmp.t = vm.drawMt+'px';
						tmp.w = vm.drawW +'px';
						tmp.h = vm.drawH +'px';
						this.hotList.push(tmp);
					}
					vm.wpDowm = false;
					vm.isDrawing = false;
					console.log(this.hotList.length);
				},
				drawedCss(obj) {
					return {
						top:obj.t,
						left:obj.l,
						width:obj.w,
						height:obj.h
					}
				},
				onDelclk(index) {
					this.hotList.splice(index,1)
				}
			},
			computed:{
				drawCss(){
					//v-bind:style 的对象语法，通常也会和 computed 属性结合使用，此 computed 属性所对应的 getter 函数需要返回一个对象
					return {
						marginTop:this.drawMt+'px',
						marginLeft:this.drawMl+'px',
						width:this.drawW+'px',
						height:this.drawH+'px'
					}
				},
				showList() {
					return JSON.parse(JSON.stringify(this.hotList));
				}
			}
		})
	</script>
</body>
</html>